<template>
  <!--转工单-->
  <el-dialog
    title="报警通知转工单"
    :visible.sync="dialogOrderVisible"
    :lock-scroll="false"
    :close-on-click-modal="false"
    @before-close="clearImg"
    width="40%"
    :modal-append-to-body="false"
  >
    <div class="dialog-con scroll-bar">
      <div class="d-dialog-title">
        <span class="name">{{ translateForm.deviceName }}</span>
        <span class="number">( {{ translateForm.deviceNumber }} )</span>
      </div>
      <div class="d-dialog-con">
        <el-form ref="tform" class="con-form" :model="translateForm" :rules="rules" label-width="100px">
          <el-form-item label="故障代码">
            <el-input disabled v-model="translateForm.errorCode"></el-input>
          </el-form-item>
          <el-form-item label="故障名称">
            <el-input disabled v-model="translateForm.errorName"></el-input>
          </el-form-item>
          <el-form-item label="合同编号">
            <el-input v-model="translateForm.protocol" disabled></el-input>
          </el-form-item>
          <el-form-item label="故障描述">
            <el-input
              v-model="translateForm.description"
              :show-word-limit="true"
              maxlength="500"
              type="textarea"
              :rows="4"
            ></el-input>
          </el-form-item>
          <el-form-item label="现场图片">
            <div class="img-list" :class="showFileList.length > 4 ? 'noneBtn' : ''">
              <el-upload
                action="#"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="showFileList"
                :before-upload="beforeUpload"
                :http-request="changeUpload"
                list-type="picture-card"
                :limit="5"
                :show-file-list="showFile"
              >
                <sc-icon class="icon" name="icontianjia"></sc-icon>
              </el-upload>
            </div>
            <span class="tip">支持JPG\PNG\GIF格式，文件不大于2M，最多不能超过5张</span>
          </el-form-item>
          <el-form-item label="现场联系人" prop="contacts">
            <el-input v-model="translateForm.contacts" @input="$forceUpdate()"></el-input>
          </el-form-item>
          <el-form-item label="联系人电话" prop="contacts_tel">
            <el-input v-model="translateForm.contacts_tel" @input="$forceUpdate()"></el-input>
          </el-form-item>
          <el-form-item label="设备地址">
            <el-input v-model="translateForm.address"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <el-dialog :visible.sync="dialogImg" :modal="false" width="30%">
        <img width="100%" height="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
      <!--上传文件-->
      <el-upload
        class="upload-demo"
        action=""
        :multiple="false"
        accept=".gif,.jpg,.jpeg,.png,.GIF,.JPG,.PNG"
        :auto-upload="false"
        :show-file-list="false"
        :on-change="changeUpload"
      >
        <i class="el-icon-upload"></i>
        <div slot="trigger" class="el-upload__text" ref="uploadBtn">点击上传</div>
      </el-upload>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button
        @click="
          dialogOrderVisible = false;
          showFileList = [];
        "
        >取 消</el-button
      >
      <el-button type="primary" @click="transToOrder">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { uploadImg, transOrder, transOrderId } from '../../../api/notice';
export default {
  name: 'transformDialog',
  data() {
    const checkPhone = (rule, value, callback) => {
      if (/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(value)) {
        callback();
      } else {
        callback(new Error('请填写正确的手机号码'));
      }
    };

    return {
      dialogOrderVisible: false, // 转工单dialog
      translateForm: {}, // 转工单form对象
      imgList: [], // 上传图片列表
      showFileList: [],
      dialogImageUrl: '', // 大图
      dialogImg: false,
      showFile: false,
      rules: {
        contacts: [{ required: true, message: '请输入现场联系人', trigger: 'blur' }],
        contacts_tel: [
          { required: true, message: '请输入联系人电话', trigger: 'blur' },
          { validate: checkPhone, trigger: 'blur' }
        ]
      } // 表单验证
    };
  },
  methods: {
    // 确认
    transToOrder() {
      this.$refs.tform.validate(res => {
        if (res) {
          this.showFileList.forEach(item => {
            this.imgList.push(item.url);
          });
          const param = Object.assign({}, this.translateForm, { photos: this.imgList, order_type: 1, source: 2 });
          transOrder(param).then(res => {
            const id = res.data;
            transOrderId({ id: this.translateForm.id, orderId: id }).then(res => {
              this.$message({
                message: '操作成功',
                type: 'success'
              });
              this.dialogOrderVisible = false;
              this.$emit('callback');
            });
          });
        }
      });
    },
    // 上传图片按钮
    uploadImgClick() {
      this.$refs.uploadBtn.click();
    },
    handleRemove(file, fileList) {
      this.showFileList = fileList;
    },
    handlePreview(file) {
      const url = file.url;
      this.dialogImageUrl = url;
      this.dialogImg = true;
    },
    beforeUpload() {
      this.showFile = false;
    },
    clearImg() {
      this.showFileList = [];
      console.log('关闭', this.showFileList);
    },
    // 上传图片
    changeUpload(data) {
      const { file, size } = data;
      if (size > 1024 * 1024 * 2) {
        this.$message({
          message: '文件大小不可超过2MB',
          type: 'warning'
        });
      } else {
        if (this.showFileList.length < 5) {
          const formData = new FormData();
          formData.append('file', file);
          uploadImg(formData).then(res => {
            const path = res.data.path;
            this.showFile = true;
            this.showFileList.push({ name: file.name, url: path });
          });
        } else {
          this.$message({
            message: '文件数量不可超过5',
            type: 'warning'
          });
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.tip {
  font-size: 13px;
  color: #909399;
}
.upload-demo {
  display: none;
}

.d-dialog-title {
  width: 100%;
  text-align: center;
  .name {
    color: #3378ff;
    font-size: 20px;
  }
  .number {
    color: #909399;
    font-size: 16px;
  }
}
.dialog-con {
  height: 50vh;
  overflow: auto;
}

.d-dialog-con {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 30px;
  .con-form {
    width: 100%;
  }
  .con-item {
    display: flex;
    align-items: center;
    border-top: 1px solid #f2f6fc;
    border-right: 1px solid #f2f6fc;
    border-left: 1px solid #f2f6fc;
    &:last-child {
      border-bottom: 1px solid #f2f6fc;
    }
    .item {
      flex: 1;
      height: 40px;
      line-height: 40px;
      padding-left: 10px;
    }
    .item2 {
      flex: 2;
      height: 40px;
      line-height: 40px;
      padding-left: 10px;
      color: #606266;
      font-size: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .big-item {
      flex: 12;
      height: 40px;
      line-height: 40px;
      font-size: 12px;
      padding-left: 10px;
    }
  }
}

.img-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  .img-add {
    width: 148px;
    height: 148px;
    background-color: #fff;
    border: 1px dashed #dcdfe6;
    box-sizing: border-box;
    border-radius: 4px;
    text-align: center;
    line-height: 148px;
    margin-left: 10px;
    margin-top: 10px;
    cursor: pointer;
  }
  .img-item {
    width: 148px;
    height: 148px;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 4px;
    margin-left: 10px;
    border: 1px dashed #dcdfe6;
  }
}

.noneBtn ::v-deep {
  .el-upload--picture-card {
    display: none !important;
  }
}
</style>
